<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Color Adjustment Module Level 1</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="exploring" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="This module introduces a model and controls over automatic color adjustment by the user agent to handle user preferences, such as &quot;Dark Mode&quot;, contrast adjustment, or specific desired color schemes." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<style>
  body {
    background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat;
  }
  </style>
  <link href="https://www.w3.org/TR/css-color-adjust-1/" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Color Adjustment Module Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <details>
    <summary>Specification Metadata</summary>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://drafts.csswg.org/css-color-adjust-1/">https://drafts.csswg.org/css-color-adjust-1/</a>
      <dt>Latest published version:
      <dd><a href="https://www.w3.org/TR/css-color-adjust-1/">https://www.w3.org/TR/css-color-adjust-1/</a>
      <dt>Previous Versions:
      <dd><a href="https://www.w3.org/TR/2019/WD-css-color-adjust-1-20190521/" rel="prev">https://www.w3.org/TR/2019/WD-css-color-adjust-1-20190521/</a>
      <dd><a href="https://www.w3.org/TR/2019/WD-css-color-adjust-1-20190521/" rel="prev">https://www.w3.org/TR/2019/WD-css-color-adjust-1-20190521/</a>
      <dt class="editor">Editors:
      <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (<span class="p-org org">Invited Expert</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="49885"><a class="p-name fn u-email email" href="mailto:ratan@microsoft.com">Rossen Atanassov</a> (<span class="p-org org">Microsoft</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="45291"><a class="p-name fn u-email email" href="mailto:futhark@google.com">Rune Lillesveen</a> (<span class="p-org org">Google</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://www.xanthir.com/contact/">Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)
      <dt>Suggest an Edit for this Spec:
      <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/css-color-adjust-1/Overview.bs">GitHub Editor</a>
      <dt>Issue Tracking:
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-color-adjust-1">GitHub Issues</a>
     </dl>
    </div>
   </details>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This module introduces a model and controls over automatic color adjustment by the user agent to handle user preferences, such as "Dark Mode", contrast adjustment, or specific desired color schemes.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-color-adjust” in the title,
	preferably like this:
	“[css-color-adjust] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
	and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li>
     <a href="#preferred"><span class="secno">2</span> <span class="content">Preferred Color Schemes</span></a>
     <ol class="toc">
      <li><a href="#color-scheme-prop"><span class="secno">2.1</span> <span class="content">Opting Into a Preferred Color Scheme: the <span class="property">color-scheme</span> property</span></a>
      <li><a href="#color-scheme-processing"><span class="secno">2.2</span> <span class="content">Finding the Used Color Scheme</span></a>
      <li><a href="#color-scheme-meta"><span class="secno">2.3</span> <span class="content">The "color-scheme" <code><span>meta</span></code> value</span></a>
     </ol>
    <li>
     <a href="#forced"><span class="secno">3</span> <span class="content">Forced Color Schemes: the <span class="property">forced-color-adjust</span> property</span></a>
     <ol class="toc">
      <li><a href="#forced-colors-properties"><span class="secno">3.1</span> <span class="content">Properties Affected by Forced Colors Mode</span></a>
      <li><a href="#forced-color-adjust-prop"><span class="secno">3.2</span> <span class="content">Opting Out of a Forced Color Scheme: the <span class="property">forced-color-adjust</span> property</span></a>
     </ol>
    <li><a href="#perf"><span class="secno">4</span> <span class="content">Performance-based Color Schemes: the <span class="property">color-adjust</span> property</span></a>
    <li><a href="#acknowledgements"><span class="secno">5</span> <span class="content">Acknowledgements</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <h2 class="heading settled" data-level="2" id="preferred"><span class="secno">2. </span><span class="content">Preferred Color Schemes</span><a class="self-link" href="#preferred"></a></h2>
   <p>Operating systems and user agents often give users
	the ability to choose their preferred color schemes
	for user interface elements.
	These are typically reflected in the user agent’s rendering
	of its navigation interface as well as in-page interface elements
	such as form controls and scrollbars,
	and are expected to also be reflected
	in the values of the CSS system colors.</p>
   <p>Users on some systems can also indicate a preference
	in the color scheme of the pages they view,
	requesting that the author adapt the page to those color preferences.
	(It is not required to express a preference;
	users can have preferences for operating system interface colors
	that they do not want imposed on pages.)
	The most common preferences
	are a choice of “Light” vs “Dark” (or “Day Mode” vs “Night Mode”) color schemes,
	rendering things as mostly light- or dark-colored backgrounds,
	and with dark- or light-colored foregrounds (text, icons).
	This module,
	together with Media Queries Level 5,
	defines controls to enable color scheme negotiation
	for "light" and "dark" color schemes (and no preference).</p>
   <p>To enable pages to adapt to the user’s preferred color scheme,
	user agents will match the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme" id="ref-for-descdef-media-prefers-color-scheme">prefers-color-scheme</a> media query
	to the user’s preferred color scheme.</p>
   <p>Additionally, if the author has indicated that the page can support this color scheme
	(see <a class="property" data-link-type="propdesc" href="#propdef-color-scheme" id="ref-for-propdef-color-scheme">color-scheme</a>),
	the user agent must match the following to the user’s preferred color scheme:</p>
   <ul>
    <li data-md>
     <p>the initial color of the background canvas <span class="issue" id="issue-a3539b82"><a class="self-link" href="#issue-a3539b82"></a>find what we name this in other specs</span>,
the initial value of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-color" id="ref-for-propdef-color">color</a> property,
and the <a href="https://www.w3.org/TR/css-color-4/#system-colors">system colors</a></p>
    <li data-md>
     <p>the default colors of scrollbars and other interaction UI</p>
    <li data-md>
     <p>the default colors of form controls and other "specially-rendered" elements</p>
    <li data-md>
     <p>the default colors of other browser-provided UI, such as "spellcheck" underlines</p>
   </ul>
   <p>User agents <em>may</em> support additional color schemes,
	however CSS does not support negotiation of additional color schemes:
	user agents should pursue standardization of these schemes,
	so that <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme" id="ref-for-descdef-media-prefers-color-scheme①">prefers-color-scheme</a> and <a class="property" data-link-type="propdesc" href="#propdef-color-scheme" id="ref-for-propdef-color-scheme①">color-scheme</a> can reflect the additional values.</p>
   <p class="note" role="note"><span>Note:</span> Aside from the small list of adjustments given above,
	user agents generally do not further adjust a page to match the user’s preferred color scheme,
	because the chance of accidentally ruining a page is too high.
	However, when particular color choices are required by the user
	(for accessibility reasons, for example),
	more invasive changes might be applied;
	see <a href="#forced">§ 3 Forced Color Schemes: the forced-color-adjust property</a>.</p>
   <h3 class="heading settled" data-level="2.1" id="color-scheme-prop"><span class="secno">2.1. </span><span class="content">Opting Into a Preferred Color Scheme: the <a class="property" data-link-type="propdesc" href="#propdef-color-scheme" id="ref-for-propdef-color-scheme②">color-scheme</a> property</span><a class="self-link" href="#color-scheme-prop"></a></h3>
   <table class="def propdef" data-link-for-hint="color-scheme">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-color-scheme">color-scheme</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">normal <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> [ light <span id="ref-for-comb-one①">|</span> dark <span id="ref-for-comb-one②">|</span> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#identifier-value" id="ref-for-identifier-value">&lt;custom-ident></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-one-plus" id="ref-for-mult-one-plus">+</a> <span id="ref-for-comb-one③">|</span> only <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-all" id="ref-for-comb-all">&amp;&amp;</a> light 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>normal 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>the keyword <a class="css" data-link-type="maybe" href="#valdef-color-scheme-normal" id="ref-for-valdef-color-scheme-normal">normal</a>, or optional <a class="css" data-link-type="maybe" href="#valdef-color-scheme-only" id="ref-for-valdef-color-scheme-only">only</a> keyword and ordered list of specified color scheme keywords 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-color-scheme" id="ref-for-propdef-color-scheme③">color-scheme</a> property allows an element to indicate
	which color schemes it is comfortable being rendered with.
	These values are negotiated with the users preferences,
	resulting in a chosen color scheme
	that affects UI things such as
	the default colors of form controls and scrollbars
	as well as the used values of the CSS system colors.
	Its values are defined as follows:</p>
   <dl>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="color-scheme" data-dfn-type="value" data-export id="valdef-color-scheme-normal">normal</dfn>
    <dd data-md>
     <p>Indicates that the element isn’t aware of color schemes at all,
and so the element should be rendered with the browser’s default color scheme.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="color-scheme" data-dfn-type="value" data-export data-lt="light | dark" id="valdef-color-scheme-light">[ light | dark | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#identifier-value" id="ref-for-identifier-value①">&lt;custom-ident></a> ]+</dfn>
    <dd data-md>
     <p>Indicates that the element is aware of and can handle the listed color schemes,
and expresses an ordered preference between them.
(See <a href="#color-scheme-processing">§ 2.2 Finding the Used Color Scheme</a> for details on how this choice is resolved.)</p>
     <p><a class="css" data-link-type="maybe" href="#valdef-color-scheme-light" id="ref-for-valdef-color-scheme-light">light</a> represents a "light" color scheme,
with light background colors and dark foreground colors. <span class="css" id="ref-for-valdef-color-scheme-light①">dark</span> represents the opposite,
with dark background colors and light foreground colors.</p>
     <p class="note" role="note"><span>Note:</span> Providing both keywords indicates that the first scheme is preferred,
but the second is also acceptable
if the user prefers it instead.</p>
     <p><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#identifier-value" id="ref-for-identifier-value②">&lt;custom-ident></a> values are meaningless,
and exist only for future compatibility,
so that future added color schemes do not invalidate the <a class="property" data-link-type="propdesc" href="#propdef-color-scheme" id="ref-for-propdef-color-scheme④">color-scheme</a> declaration
in legacy user agents.
User agents <em>must not</em> interpret any <span class="production" id="ref-for-identifier-value③">&lt;custom-ident></span> values as having a meaning;
any additional recognized color schemes
must be explicitly added to this property’s grammar.
To avoid confusion,
authoring tutorials and references
should omit it from their materials.</p>
     <p><a class="css" data-link-type="maybe" href="#valdef-color-scheme-only" id="ref-for-valdef-color-scheme-only①">only</a>, <a class="css" data-link-type="maybe" href="#valdef-color-scheme-normal" id="ref-for-valdef-color-scheme-normal①">normal</a>, <a class="css" data-link-type="maybe" href="#valdef-color-scheme-light" id="ref-for-valdef-color-scheme-light②">light</a>, and <span class="css" id="ref-for-valdef-color-scheme-light③">dark</span> are not valid <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#identifier-value" id="ref-for-identifier-value④">&lt;custom-ident></a>s in this property.</p>
     <p>Repeating a keyword, such as <a class="css" data-link-type="propdesc" href="#propdef-color-scheme" id="ref-for-propdef-color-scheme⑤">color-scheme: light light</a>,
is valid but has no additional effect
beyond what the first instance of the keyword provides.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="color-scheme" data-dfn-type="value" data-export id="valdef-color-scheme-only">only</dfn>
    <dd data-md>
     <p>If provided, <a class="css" data-link-type="maybe" href="#valdef-color-scheme-only" id="ref-for-valdef-color-scheme-only②">only</a> indicates that the element <em>must</em> be rendered with one of the specified color schemes,
if possible,
even if the user’s preference is for a different color scheme.</p>
     <p class="issue" id="issue-daa039ca"><a class="self-link" href="#issue-daa039ca"></a> Per spec, <a class="css" data-link-type="maybe" href="#valdef-color-scheme-only" id="ref-for-valdef-color-scheme-only③">only</a> can only be used with <a class="css" data-link-type="maybe" href="#valdef-color-scheme-light" id="ref-for-valdef-color-scheme-light④">light</a>.
Apple’s implementation allows it with <span class="css" id="ref-for-valdef-color-scheme-light⑤">dark</span> as well.
The concern with <span class="css">only dark</span> is that pages won’t consider UAs that can’t support <span class="css" id="ref-for-valdef-color-scheme-light⑥">dark</span> schemes,
and will thus render brokenly.
This value might be expanded to all schemes or removed entirely
depending on further consideration.</p>
     <p>Authors <strong>should not</strong> use this value,
and should instead ensure that their page renders well with whatever color scheme the user prefers
(using the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme" id="ref-for-descdef-media-prefers-color-scheme②">prefers-color-scheme</a> media query to adjust styles accordingly).
This keyword is provided only for the rare cases where that might not be reasonably possible,
and using a different color scheme would render the element difficult or impossible to use.</p>
     <p>Note that user agents are <strong>not required</strong> to support any particular color scheme,
so using <a class="css" data-link-type="maybe" href="#valdef-color-scheme-only" id="ref-for-valdef-color-scheme-only④">only</a> to indicate a required color scheme
is still not guaranteed to have any effect on the rendering of the element.</p>
   </dl>
   <p class="note" role="note"><span>Note:</span> “Light” and “Dark” modes are not specific color palettes.
	For example,
	both a stark black-on-white scheme and a sepia dark-on-tan scheme
	would be considered “Light” color schemes.
	To ensure particular foreground or background colors,
	they need to be specified explicitly.</p>
   <h3 class="heading settled" data-level="2.2" id="color-scheme-processing"><span class="secno">2.2. </span><span class="content">Finding the Used Color Scheme</span><a class="self-link" href="#color-scheme-processing"></a></h3>
   <div class="algorithm" data-algorithm="used color scheme">
     To find the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="used-color-scheme">used color scheme</dfn> for an element <var>el</var>: 
    <ol>
     <li data-md>
      <p>Let <var>scheme</var> be the keyword matching <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme" id="ref-for-descdef-media-prefers-color-scheme③">prefers-color-scheme</a>.</p>
     <li data-md>
      <p>If the computed value of <a class="property" data-link-type="propdesc" href="#propdef-color-scheme" id="ref-for-propdef-color-scheme⑥">color-scheme</a> on <var>el</var> contains <var>scheme</var>,
return <var>scheme</var>.</p>
     <li data-md>
      <p>If the computed value of <a class="property" data-link-type="propdesc" href="#propdef-color-scheme" id="ref-for-propdef-color-scheme⑦">color-scheme</a> on <var>el</var> contains the <a class="css" data-link-type="maybe" href="#valdef-color-scheme-only" id="ref-for-valdef-color-scheme-only⑤">only</a> keyword
or <var>scheme</var> is <span class="css">no-preference</span>,
and at least one color scheme indicated in <span class="property" id="ref-for-propdef-color-scheme⑧">color-scheme</span> is supported by the user agent,
return the first keyword,
in specified order,
that is supported by the user agent.</p>
     <li data-md>
      <p>Otherwise, return <span class="css">no-preference</span>.</p>
    </ol>
   </div>
   <p>For each element,
	find the <a data-link-type="dfn" href="#used-color-scheme" id="ref-for-used-color-scheme">used color scheme</a> for that element.
	If the <span id="ref-for-used-color-scheme①">used color scheme</span> is <span class="css">no-preference</span>,
	the element must be rendered with the user agent’s default color scheme.
	(For Web compatibility, this should be a "light" color scheme.)
	Otherwise,
	the element must be rendered with the <span id="ref-for-used-color-scheme②">used color scheme</span>.</p>
   <p class="note" role="note"><span>Note:</span> This algorithm ensures that
	if the user prefers a non-default color scheme,
	it will only be used if the page claims to support it.
	This ensures that legacy pages,
	written before color scheme preferences were exposed,
	do not change behavior.</p>
   <p>For all elements,
	rendering with a color scheme should affect the colors used in all browser-provided UI for the element—<wbr>e.g. scrollbars, spellcheck underlines, form controls, etc.—<wbr>to match with the intent of the color scheme.</p>
   <p>For the root element of a page,
	rendering with a color scheme additionally must affect the background of the canvas,
	the initial value of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-color" id="ref-for-propdef-color①">color</a> property,
	and the <a href="https://www.w3.org/TR/css-color-4/#system-colors">system colors</a>,
	and should affect the page’s scrollbars.</p>
   <h3 class="heading settled" data-level="2.3" id="color-scheme-meta"><span class="secno">2.3. </span><span class="content">The "color-scheme" <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/semantics.html#meta" id="ref-for-meta">meta</a></code> value</span><a class="self-link" href="#color-scheme-meta"></a></h3>
   <p>To aid user agents in rendering the page background with the desired color scheme immediately
	(rather than waiting for all CSS in the page to load),
	a <a class="property" data-link-type="propdesc" href="#propdef-color-scheme" id="ref-for-propdef-color-scheme⑨">color-scheme</a> value can also be provided in a <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/semantics.html#meta" id="ref-for-meta①">meta</a></code> element.</p>
   <p>If any <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/semantics.html#meta" id="ref-for-meta②">meta</a></code> elements are <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#insert-an-element-into-a-document" id="ref-for-insert-an-element-into-a-document">inserted into a document</a> or <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#remove-an-element-from-a-document" id="ref-for-remove-an-element-from-a-document">removed from a document</a>,
	or existing <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/semantics.html#meta" id="ref-for-meta③">meta</a></code> elements have their <code><a data-link-type="element-sub">name</a></code> or <code><a data-link-type="element-sub" href="https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-content" id="ref-for-attr-meta-content">content</a></code> attributes changed,
	user agents must run the following algorithm:</p>
   <div class="algorithm" data-algorithm="find the color-scheme meta">
    <ol>
     <li data-md>
      <p>Let <var>candidate elements</var> be the list of all <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/semantics.html#meta" id="ref-for-meta④">meta</a></code> elements that meet the following criteria,
in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-order" id="ref-for-concept-tree-order">tree order</a>:</p>
      <ul>
       <li data-md>
        <p>the element is <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#in-a-document-tree" id="ref-for-in-a-document-tree">in a document tree</a></p>
       <li data-md>
        <p>the element has a <code><a data-link-type="element-sub">name</a></code> attribute,
whose value is an <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ascii-case-insensitive" id="ref-for-ascii-case-insensitive">ASCII case-insensitive</a> match for <code>color-scheme</code></p>
       <li data-md>
        <p>the element has a <code><a data-link-type="element-sub" href="https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-content" id="ref-for-attr-meta-content①">content</a></code> attribute,
whose value is not the empty string</p>
       <li data-md>
        <p>the element is a child of the <a data-link-type="dfn">the head element</a> of the document</p>
      </ul>
     <li data-md>
      <p>For each <var>element</var> in <var>candidate elements</var>:</p>
      <ol>
       <li data-md>
        <p>If <var>element</var>’s <code><a data-link-type="element-sub" href="https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-content" id="ref-for-attr-meta-content②">content</a></code> attribute’s value <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar" id="ref-for-css-parse-something-according-to-a-css-grammar">parses</a> as a &lt;<a class="property" data-link-type="propdesc" href="#propdef-color-scheme" id="ref-for-propdef-color-scheme①⓪">color-scheme</a>> value,
treat that value as a declaration of the <span class="property" id="ref-for-propdef-color-scheme①①">color-scheme</span> property on <var>element</var>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-root" id="ref-for-concept-tree-root">root</a>,
cascaded as a <a href="https://www.w3.org/TR/css-cascade-4/#preshint">non-CSS presentational hint</a>.
Then return.</p>
      </ol>
    </ol>
    <p class="note" role="note"><span>Note:</span> Because these rules check successive elements until they find a match,
		an author can provide multiple such values
		to handle fallback for legacy user agents.
		Opposite how CSS fallback works for properties,
		the multiple <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/semantics.html#meta" id="ref-for-meta⑤">meta</a></code> elements must be arranged
		with the legacy values <em>after</em> the newer values.</p>
   </div>
   <p class="issue" id="issue-70752398"><a class="self-link" href="#issue-70752398"></a> This algorithm favors the first <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/semantics.html#meta" id="ref-for-meta⑥">meta</a></code>,
	to allow for ASAP rendering with a chosen color scheme.
	Is that the desired behavior?</p>
   <h2 class="heading settled" data-level="3" id="forced"><span class="secno">3. </span><span class="content">Forced Color Schemes: the <a class="property" data-link-type="propdesc" href="#propdef-forced-color-adjust" id="ref-for-propdef-forced-color-adjust">forced-color-adjust</a> property</span><a class="self-link" href="#forced"></a></h2>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="forced-colors-mode">Forced colors mode</dfn> is an accessibility feature
	intended to increase the readability of text through color contrast.
	Individuals with limited vision
	often find it more comfortable to read content
	when there is a a particular type of contrast
	between foreground and background colors.</p>
   <p>Operating systems can provide built-in color themes,
	such as Windows’ high contrast black-on-white
	and high-contrast white-on-black themes.
	Users can also customize their own themes,
	for example to provide low contrast or hue contrast.</p>
   <p>In <a data-link-type="dfn" href="#forced-colors-mode" id="ref-for-forced-colors-mode">forced colors mode</a>,
	the user agent enforces the user’s preferred color palette on the page,
	overriding the author’s chosen colors for specific properties,
	see <a href="#forced-colors-properties">§ 3.1 Properties Affected by Forced Colors Mode</a>.
	It may also enforce a “backplate” underneath text
	(similar to the way backgrounds are painted on the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-selection" id="ref-for-selectordef-selection">::selection</a> pseudo-element)
	to ensure adequate contrast for readability.</p>
   <p>To enable pages to adapt to <a data-link-type="dfn" href="#forced-colors-mode" id="ref-for-forced-colors-mode①">forced colors mode</a> user agents will match the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/mediaqueries-5/#descdef-media-forced-colors" id="ref-for-descdef-media-forced-colors">forced-colors</a> media query
	and must provide the required color palette
	through the CSS system colors
	(see <a data-link-type="biblio" href="#biblio-css-color-4">[CSS-COLOR-4]</a>).
	Additionally,
	if the UA determines (based on Lab lightness),
	that the canvas color
	is clearly either dark or light
	(for some reasonable UA delineation of “dark” or “light”),
	then it must match the appropriate value
	of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme" id="ref-for-descdef-media-prefers-color-scheme④">prefers-color-scheme</a> media query
	and express a corresponding user preference for <a class="property" data-link-type="propdesc" href="#propdef-color-scheme" id="ref-for-propdef-color-scheme①②">color-scheme</a>.
	This will allow pages that support light/dark color schemes
	to automatically adjust to more closely match
	the forced color scheme.
	Note that medium-lightness forced backgrounds may yield
	a <span class="property" id="ref-for-descdef-media-prefers-color-scheme⑤">prefers-color-scheme</span> of <span class="css">no-preference</span>.</p>
   <h3 class="heading settled" data-level="3.1" id="forced-colors-properties"><span class="secno">3.1. </span><span class="content">Properties Affected by Forced Colors Mode</span><a class="self-link" href="#forced-colors-properties"></a></h3>
   <p>When <a data-link-type="dfn" href="#forced-colors-mode" id="ref-for-forced-colors-mode②">forced colors mode</a> is active
	and <a class="property" data-link-type="propdesc" href="#propdef-forced-color-adjust" id="ref-for-propdef-forced-color-adjust①">forced-color-adjust</a> is <a class="css" data-link-type="maybe" href="#valdef-forced-color-adjust-auto" id="ref-for-valdef-forced-color-adjust-auto">auto</a> (see below),
	the following <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#cascade-origin-user" id="ref-for-cascade-origin-user">user origin</a> declarations <a data-link-type="biblio" href="#biblio-css-cascade-4">[CSS-CASCADE-4]</a> are applied to the element:</p>
<pre>color: revert !important;
fill: revert !important;
stroke: revert !important;
text-decoration-color: revert !important;
text-emphasis-color: revert !important;
background-color: revert !important;
border-color: revert !important;
outline-color: revert !important;
column-rule-color: revert !important;
scrollbar-color: revert !important;
-webkit-tap-highlight-color: revert !important; /* ISSUE: This is not in a spec anywhere! */

box-shadow: none !important;
text-shadow: none !important;
</pre>
   <p>Additionally, on <em>on user input controls (except button-like controls) only</em>:</p>
<pre>background-image: none !important;
</pre>
   <p>UA may further tweak these <a data-link-type="dfn" href="#forced-colors-mode" id="ref-for-forced-colors-mode③">forced colors mode</a> heuristics
	to provide better user experience.</p>
   <h3 class="heading settled" data-level="3.2" id="forced-color-adjust-prop"><span class="secno">3.2. </span><span class="content">Opting Out of a Forced Color Scheme: the <a class="property" data-link-type="propdesc" href="#propdef-forced-color-adjust" id="ref-for-propdef-forced-color-adjust②">forced-color-adjust</a> property</span><a class="self-link" href="#forced-color-adjust-prop"></a></h3>
   <table class="def propdef" data-link-for-hint="forced-color-adjust">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-forced-color-adjust">forced-color-adjust</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> none 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-forced-color-adjust" id="ref-for-propdef-forced-color-adjust③">forced-color-adjust</a> property
	allows authors to opt particular elements
	out of <a data-link-type="dfn" href="#forced-colors-mode" id="ref-for-forced-colors-mode④">forced colors mode</a>,
	restoring full control over the colors to CSS.
	Values have the following meanings:</p>
   <dl>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="forced-color-adjust" data-dfn-type="value" data-export id="valdef-forced-color-adjust-auto">auto</dfn>
    <dd data-md>
     <p>The element’s colors are automatically adjusted by the UA
in <a data-link-type="dfn" href="#forced-colors-mode" id="ref-for-forced-colors-mode⑤">forced colors mode</a>.</p>
    <dt data-md><dfn class="css" data-dfn-for="forced-color-adjust" data-dfn-type="value" data-export id="valdef-forced-color-adjust-none">none<a class="self-link" href="#valdef-forced-color-adjust-none"></a></dfn>
    <dd data-md>
     <p>The element’s colors are not automatically adjusted by the UA
in <a data-link-type="dfn" href="#forced-colors-mode" id="ref-for-forced-colors-mode⑥">forced colors mode</a>.</p>
     <p><strong class="advisement"> Authors should only use this value
when they are themselves adjusting the colors
to support the user’s color and contrast needs
and need to make changes to the UA’s default adjustments
to provide a more appropriate user experience
for those elements.</strong></p>
   </dl>
   <p class="issue" id="issue-aa11e0b6"><a class="self-link" href="#issue-aa11e0b6"></a> Should this property be merged with <a class="property" data-link-type="propdesc" href="#propdef-color-adjust" id="ref-for-propdef-color-adjust">color-adjust</a> somehow?</p>
   <p>In order to not break SVG content,
	UAs are expected to add the following rules to their UA style sheet:</p>
<pre>@namespace "http://www.w3.org/2000/svg";
svg|svg { forced-color-adjust: none; }
svg|text, svg|foreignObject { forced-color-adjust: auto; }
</pre>
   <h2 class="heading settled" data-level="4" id="perf"><span class="secno">4. </span><span class="content">Performance-based Color Schemes: the <a class="property" data-link-type="propdesc" href="#propdef-color-adjust" id="ref-for-propdef-color-adjust①">color-adjust</a> property</span><a class="self-link" href="#perf"></a></h2>
   <p>On most monitors,
	the color choices that authors make have no significant difference
	in terms of how the device performs;
	displaying a document with a white background or a black background is approximately equally easy.</p>
   <p>However, some devices have limitations and other qualities that make this assumption untrue.
	For example,
	printers tend to print on white paper;
	a document with a white background thus has to spend no ink on drawing that background,
	while a document with a black background will have to expend a large amount of ink filling in the background color.
	This tends to look fairly bad,
	and sometimes has deleterious physical effects on the paper,
	not to mention the vastly increased printing cost from expending the extra ink.
	Even fairly small differences,
	such as coloring text black versus dark gray,
	can be quite different when printing,
	as it switches from using a single black ink
	to a mixture of cyan, magenta, and yellow ink,
	resulting in higher ink usage and lower resolution.</p>
   <p>As a result, in some circumstances user agents will alter the styles an author specifies in some particular context,
	adjusting them to be more appropriate for the output device
	and to accommodate what they assume the user would prefer.
	However, in some cases the document may be using colors in important, well-thought-out ways that the user would appreciate,
	and so the document would like some way to hint to the user agent that it might want to respect the page’s color choices.
	The <a class="property" data-link-type="propdesc" href="#propdef-color-adjust" id="ref-for-propdef-color-adjust②">color-adjust</a> property controls this.</p>
   <table class="def propdef" data-link-for-hint="color-adjust">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-color-adjust">color-adjust</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">economy <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> exact 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>economy 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified keyword 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-color-adjust" id="ref-for-propdef-color-adjust③">color-adjust</a> property provides a hint to the user-agent about how it should treat color and style choices
	that might be expensive or generally unwise on a given device,
	such as using light text on a dark background in a printed document.
	If user agents allow users to control this aspect of the document’s display,
	the user preference <strong>must</strong> be respected more strongly
	than the hint provided by <span class="property" id="ref-for-propdef-color-adjust④">color-adjust</span>.
	It has the following values:</p>
   <dl>
    <dt><dfn class="css" data-dfn-for="color-adjust" data-dfn-type="value" data-export id="valdef-color-adjust-economy">economy<a class="self-link" href="#valdef-color-adjust-economy"></a></dfn> 
    <dd>
      The user agent should make adjustments to the page’s styling
			as it deems necessary and prudent for the output device. 
     <p>For example, if the document is being printed,
			a user agent might ignore any backgrounds
			and adjust text color to be sufficiently dark,
			to minimize ink usage.</p>
    <dt><dfn class="css" data-dfn-for="color-adjust" data-dfn-type="value" data-export id="valdef-color-adjust-exact">exact<a class="self-link" href="#valdef-color-adjust-exact"></a></dfn> 
    <dd>
      This value indicates that the page is using color and styling on the specified element
			in a way which is important and significant,
			and which should not be tweaked or changed except at the user’s request. 
     <p>For example,
			a mapping website offering printed directions
			might "zebra-stripe" the steps in the directions,
			alternating between white and light gray backgrounds.
			Losing this zebra-striping and having a pure-white background
			would make the directions harder to read with a quick glance
			when distracted in a car.</p>
   </dl>
   <h2 class="heading settled" data-level="5" id="acknowledgements"><span class="secno">5. </span><span class="content">Acknowledgements</span><a class="self-link" href="#acknowledgements"></a></h2>
   <p>This specification would not be possible
	without the development efforts
	of various color adjustment features
	at Apple, Google, and Microsoft
	as well as discussions about print adjustments on www-style.
	In particular, the CSS Working Group would like to thank:
	Alison Maher,
	François Remy,
	イアンフェッティ</p>
   <p class="issue" id="issue-8edfffeb"><a class="self-link" href="#issue-8edfffeb"></a> List additional MSFT / Apple / Google people here.</p>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#valdef-forced-color-adjust-auto">auto</a><span>, in §3.2</span>
   <li><a href="#propdef-color-adjust">color-adjust</a><span>, in §4</span>
   <li><a href="#propdef-color-scheme">color-scheme</a><span>, in §2.1</span>
   <li><a href="#valdef-color-scheme-light">dark</a><span>, in §2.1</span>
   <li><a href="#valdef-color-adjust-economy">economy</a><span>, in §4</span>
   <li><a href="#valdef-color-adjust-exact">exact</a><span>, in §4</span>
   <li><a href="#propdef-forced-color-adjust">forced-color-adjust</a><span>, in §3.2</span>
   <li><a href="#forced-colors-mode">Forced colors mode</a><span>, in §3</span>
   <li><a href="#valdef-color-scheme-light">light</a><span>, in §2.1</span>
   <li><a href="#valdef-forced-color-adjust-none">none</a><span>, in §3.2</span>
   <li><a href="#valdef-color-scheme-normal">normal</a><span>, in §2.1</span>
   <li><a href="#valdef-color-scheme-only">only</a><span>, in §2.1</span>
   <li><a href="#used-color-scheme">used color scheme</a><span>, in §2.2</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-cascade-origin-user">
   <a href="https://drafts.csswg.org/css-cascade-4/#cascade-origin-user">https://drafts.csswg.org/css-cascade-4/#cascade-origin-user</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cascade-origin-user">3.1. Properties Affected by Forced Colors Mode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-color">
   <a href="https://drafts.csswg.org/css-color-4/#propdef-color">https://drafts.csswg.org/css-color-4/#propdef-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-color">2. Preferred Color Schemes</a>
    <li><a href="#ref-for-propdef-color①">2.2. Finding the Used Color Scheme</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-selectordef-selection">
   <a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-selection">https://drafts.csswg.org/css-pseudo-4/#selectordef-selection</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-selection">3. Forced Color Schemes: the forced-color-adjust property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css-parse-something-according-to-a-css-grammar">
   <a href="https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar">https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-parse-something-according-to-a-css-grammar">2.3. The "color-scheme" meta value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-all">
   <a href="https://drafts.csswg.org/css-values-4/#comb-all">https://drafts.csswg.org/css-values-4/#comb-all</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-all">2.1. Opting Into a Preferred Color Scheme: the color-scheme property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-one-plus">
   <a href="https://drafts.csswg.org/css-values-4/#mult-one-plus">https://drafts.csswg.org/css-values-4/#mult-one-plus</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-one-plus">2.1. Opting Into a Preferred Color Scheme: the color-scheme property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-identifier-value">
   <a href="https://drafts.csswg.org/css-values-4/#identifier-value">https://drafts.csswg.org/css-values-4/#identifier-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-identifier-value">2.1. Opting Into a Preferred Color Scheme: the color-scheme property</a> <a href="#ref-for-identifier-value①">(2)</a> <a href="#ref-for-identifier-value②">(3)</a> <a href="#ref-for-identifier-value③">(4)</a> <a href="#ref-for-identifier-value④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">2.1. Opting Into a Preferred Color Scheme: the color-scheme property</a> <a href="#ref-for-comb-one①">(2)</a> <a href="#ref-for-comb-one②">(3)</a> <a href="#ref-for-comb-one③">(4)</a>
    <li><a href="#ref-for-comb-one④">3.2. Opting Out of a Forced Color Scheme: the forced-color-adjust property</a>
    <li><a href="#ref-for-comb-one⑤">4. Performance-based Color Schemes: the color-adjust property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-in-a-document-tree">
   <a href="https://dom.spec.whatwg.org/#in-a-document-tree">https://dom.spec.whatwg.org/#in-a-document-tree</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in-a-document-tree">2.3. The "color-scheme" meta value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-tree-root">
   <a href="https://dom.spec.whatwg.org/#concept-tree-root">https://dom.spec.whatwg.org/#concept-tree-root</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-tree-root">2.3. The "color-scheme" meta value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-tree-order">
   <a href="https://dom.spec.whatwg.org/#concept-tree-order">https://dom.spec.whatwg.org/#concept-tree-order</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-tree-order">2.3. The "color-scheme" meta value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-attr-meta-content">
   <a href="https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-content">https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-content</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-attr-meta-content">2.3. The "color-scheme" meta value</a> <a href="#ref-for-attr-meta-content①">(2)</a> <a href="#ref-for-attr-meta-content②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-insert-an-element-into-a-document">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#insert-an-element-into-a-document">https://html.spec.whatwg.org/multipage/infrastructure.html#insert-an-element-into-a-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-insert-an-element-into-a-document">2.3. The "color-scheme" meta value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-meta">
   <a href="https://html.spec.whatwg.org/multipage/semantics.html#meta">https://html.spec.whatwg.org/multipage/semantics.html#meta</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-meta">2.3. The "color-scheme" meta value</a> <a href="#ref-for-meta①">(2)</a> <a href="#ref-for-meta②">(3)</a> <a href="#ref-for-meta③">(4)</a> <a href="#ref-for-meta④">(5)</a> <a href="#ref-for-meta⑤">(6)</a> <a href="#ref-for-meta⑥">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-remove-an-element-from-a-document">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#remove-an-element-from-a-document">https://html.spec.whatwg.org/multipage/infrastructure.html#remove-an-element-from-a-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-remove-an-element-from-a-document">2.3. The "color-scheme" meta value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ascii-case-insensitive">
   <a href="https://infra.spec.whatwg.org/#ascii-case-insensitive">https://infra.spec.whatwg.org/#ascii-case-insensitive</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ascii-case-insensitive">2.3. The "color-scheme" meta value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-descdef-media-forced-colors">
   <a href="https://drafts.csswg.org/mediaqueries-5/#descdef-media-forced-colors">https://drafts.csswg.org/mediaqueries-5/#descdef-media-forced-colors</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-descdef-media-forced-colors">3. Forced Color Schemes: the forced-color-adjust property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-descdef-media-prefers-color-scheme">
   <a href="https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme">https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-descdef-media-prefers-color-scheme">2. Preferred Color Schemes</a> <a href="#ref-for-descdef-media-prefers-color-scheme①">(2)</a>
    <li><a href="#ref-for-descdef-media-prefers-color-scheme②">2.1. Opting Into a Preferred Color Scheme: the color-scheme property</a>
    <li><a href="#ref-for-descdef-media-prefers-color-scheme③">2.2. Finding the Used Color Scheme</a>
    <li><a href="#ref-for-descdef-media-prefers-color-scheme④">3. Forced Color Schemes: the forced-color-adjust property</a> <a href="#ref-for-descdef-media-prefers-color-scheme⑤">(2)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[CSS-CASCADE-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-cascade-origin-user" style="color:initial">user origin</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-COLOR-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-color" style="color:initial">color</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-pseudo-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-selectordef-selection" style="color:initial">::selection</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-syntax-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-css-parse-something-according-to-a-css-grammar" style="color:initial">parse</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-comb-all" style="color:initial">&amp;&amp;</span>
     <li><span class="dfn-paneled" id="term-for-mult-one-plus" style="color:initial">+</span>
     <li><span class="dfn-paneled" id="term-for-identifier-value" style="color:initial">&lt;custom-ident></span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-in-a-document-tree" style="color:initial">in a document tree</span>
     <li><span class="dfn-paneled" id="term-for-concept-tree-root" style="color:initial">root</span>
     <li><span class="dfn-paneled" id="term-for-concept-tree-order" style="color:initial">tree order</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-attr-meta-content" style="color:initial">content</span>
     <li><span class="dfn-paneled" id="term-for-insert-an-element-into-a-document" style="color:initial">inserted into a document</span>
     <li><span class="dfn-paneled" id="term-for-meta" style="color:initial">meta</span>
     <li><span class="dfn-paneled" id="term-for-remove-an-element-from-a-document" style="color:initial">removed from a document</span>
    </ul>
   <li>
    <a data-link-type="biblio">[INFRA]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-ascii-case-insensitive" style="color:initial">ascii case-insensitive</span>
    </ul>
   <li>
    <a data-link-type="biblio">[mediaqueries-5]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-descdef-media-forced-colors" style="color:initial">forced-colors</span>
     <li><span class="dfn-paneled" id="term-for-descdef-media-prefers-color-scheme" style="color:initial">prefers-color-scheme</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-cascade-4">[CSS-CASCADE-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a>
   <dt id="biblio-css-color-4">[CSS-COLOR-4]
   <dd>Tab Atkins Jr.; Chris Lilley. <a href="https://www.w3.org/TR/css-color-4/">CSS Color Module Level 4</a>. 5 March 2019. WD. URL: <a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</a>
   <dt id="biblio-css-pseudo-4">[CSS-PSEUDO-4]
   <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="https://www.w3.org/TR/css-pseudo-4/">CSS Pseudo-Elements Module Level 4</a>. 25 February 2019. WD. URL: <a href="https://www.w3.org/TR/css-pseudo-4/">https://www.w3.org/TR/css-pseudo-4/</a>
   <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3]
   <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://www.w3.org/TR/css-syntax-3/">CSS Syntax Module Level 3</a>. 20 February 2014. CR. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-infra">[INFRA]
   <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/">Infra Standard</a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a>
   <dt id="biblio-mediaqueries-5">[MEDIAQUERIES-5]
   <dd>Media Queries Level 5 URL: <a href="https://drafts.csswg.org/mediaqueries-5/">https://drafts.csswg.org/mediaqueries-5/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
  <div class="big-element-wrapper">
   <table class="index">
    <thead>
     <tr>
      <th scope="col">Name
      <th scope="col">Value
      <th scope="col">Initial
      <th scope="col">Applies to
      <th scope="col">Inh.
      <th scope="col">%ages
      <th scope="col">Anim­ation type
      <th scope="col">Canonical order
      <th scope="col">Com­puted value
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-color-adjust" id="ref-for-propdef-color-adjust⑤">color-adjust</a>
      <td>economy | exact
      <td>economy
      <td>all elements
      <td>yes
      <td>N/A
      <td>discrete
      <td>per grammar
      <td>specified keyword
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-color-scheme" id="ref-for-propdef-color-scheme①③">color-scheme</a>
      <td>normal | [ light | dark | &lt;custom-ident> ]+ | only &amp;&amp; light
      <td>normal
      <td>all elements
      <td>yes
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>the keyword normal, or optional only keyword and ordered list of specified color scheme keywords
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-forced-color-adjust" id="ref-for-propdef-forced-color-adjust④">forced-color-adjust</a>
      <td>auto | none
      <td>auto
      <td>all elements
      <td>yes
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>as specified
   </table>
  </div>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue">find what we name this in other specs<a href="#issue-a3539b82"> ↵ </a></div>
   <div class="issue"> Per spec, <a class="css" data-link-type="maybe" href="#valdef-color-scheme-only">only</a> can only be used with <a class="css" data-link-type="maybe" href="#valdef-color-scheme-light">light</a>.
Apple’s implementation allows it with <span class="css">dark</span> as well.
The concern with <span class="css">only dark</span> is that pages won’t consider UAs that can’t support <span class="css">dark</span> schemes,
and will thus render brokenly.
This value might be expanded to all schemes or removed entirely
depending on further consideration.<a href="#issue-daa039ca"> ↵ </a></div>
   <div class="issue"> This algorithm favors the first <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/semantics.html#meta">meta</a></code>,
	to allow for ASAP rendering with a chosen color scheme.
	Is that the desired behavior?<a href="#issue-70752398"> ↵ </a></div>
   <div class="issue"> Should this property be merged with <a class="property" data-link-type="propdesc" href="#propdef-color-adjust">color-adjust</a> somehow?<a href="#issue-aa11e0b6"> ↵ </a></div>
   <div class="issue"> List additional MSFT / Apple / Google people here.<a href="#issue-8edfffeb"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="propdef-color-scheme">
   <b><a href="#propdef-color-scheme">#propdef-color-scheme</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-color-scheme">2. Preferred Color Schemes</a> <a href="#ref-for-propdef-color-scheme①">(2)</a>
    <li><a href="#ref-for-propdef-color-scheme②">2.1. Opting Into a Preferred Color Scheme: the color-scheme property</a> <a href="#ref-for-propdef-color-scheme③">(2)</a> <a href="#ref-for-propdef-color-scheme④">(3)</a> <a href="#ref-for-propdef-color-scheme⑤">(4)</a>
    <li><a href="#ref-for-propdef-color-scheme⑥">2.2. Finding the Used Color Scheme</a> <a href="#ref-for-propdef-color-scheme⑦">(2)</a> <a href="#ref-for-propdef-color-scheme⑧">(3)</a>
    <li><a href="#ref-for-propdef-color-scheme⑨">2.3. The "color-scheme" meta value</a> <a href="#ref-for-propdef-color-scheme①⓪">(2)</a> <a href="#ref-for-propdef-color-scheme①①">(3)</a>
    <li><a href="#ref-for-propdef-color-scheme①②">3. Forced Color Schemes: the forced-color-adjust property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-color-scheme-normal">
   <b><a href="#valdef-color-scheme-normal">#valdef-color-scheme-normal</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-scheme-normal">2.1. Opting Into a Preferred Color Scheme: the color-scheme property</a> <a href="#ref-for-valdef-color-scheme-normal①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-color-scheme-light">
   <b><a href="#valdef-color-scheme-light">#valdef-color-scheme-light</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-scheme-light">2.1. Opting Into a Preferred Color Scheme: the color-scheme property</a> <a href="#ref-for-valdef-color-scheme-light①">(2)</a> <a href="#ref-for-valdef-color-scheme-light②">(3)</a> <a href="#ref-for-valdef-color-scheme-light③">(4)</a> <a href="#ref-for-valdef-color-scheme-light④">(5)</a> <a href="#ref-for-valdef-color-scheme-light⑤">(6)</a> <a href="#ref-for-valdef-color-scheme-light⑥">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-color-scheme-only">
   <b><a href="#valdef-color-scheme-only">#valdef-color-scheme-only</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-scheme-only">2.1. Opting Into a Preferred Color Scheme: the color-scheme property</a> <a href="#ref-for-valdef-color-scheme-only①">(2)</a> <a href="#ref-for-valdef-color-scheme-only②">(3)</a> <a href="#ref-for-valdef-color-scheme-only③">(4)</a> <a href="#ref-for-valdef-color-scheme-only④">(5)</a>
    <li><a href="#ref-for-valdef-color-scheme-only⑤">2.2. Finding the Used Color Scheme</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="used-color-scheme">
   <b><a href="#used-color-scheme">#used-color-scheme</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-used-color-scheme">2.2. Finding the Used Color Scheme</a> <a href="#ref-for-used-color-scheme①">(2)</a> <a href="#ref-for-used-color-scheme②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="forced-colors-mode">
   <b><a href="#forced-colors-mode">#forced-colors-mode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-forced-colors-mode">3. Forced Color Schemes: the forced-color-adjust property</a> <a href="#ref-for-forced-colors-mode①">(2)</a>
    <li><a href="#ref-for-forced-colors-mode②">3.1. Properties Affected by Forced Colors Mode</a> <a href="#ref-for-forced-colors-mode③">(2)</a>
    <li><a href="#ref-for-forced-colors-mode④">3.2. Opting Out of a Forced Color Scheme: the forced-color-adjust property</a> <a href="#ref-for-forced-colors-mode⑤">(2)</a> <a href="#ref-for-forced-colors-mode⑥">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-forced-color-adjust">
   <b><a href="#propdef-forced-color-adjust">#propdef-forced-color-adjust</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-forced-color-adjust">3. Forced Color Schemes: the forced-color-adjust property</a>
    <li><a href="#ref-for-propdef-forced-color-adjust①">3.1. Properties Affected by Forced Colors Mode</a>
    <li><a href="#ref-for-propdef-forced-color-adjust②">3.2. Opting Out of a Forced Color Scheme: the forced-color-adjust property</a> <a href="#ref-for-propdef-forced-color-adjust③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-forced-color-adjust-auto">
   <b><a href="#valdef-forced-color-adjust-auto">#valdef-forced-color-adjust-auto</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-forced-color-adjust-auto">3.1. Properties Affected by Forced Colors Mode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-color-adjust">
   <b><a href="#propdef-color-adjust">#propdef-color-adjust</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-color-adjust">3.2. Opting Out of a Forced Color Scheme: the forced-color-adjust property</a>
    <li><a href="#ref-for-propdef-color-adjust①">4. Performance-based Color Schemes: the color-adjust property</a> <a href="#ref-for-propdef-color-adjust②">(2)</a> <a href="#ref-for-propdef-color-adjust③">(3)</a> <a href="#ref-for-propdef-color-adjust④">(4)</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>